<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>番茄时钟</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
</head>
<body>
    <div class="container">
        <h1>番茄时钟</h1>
        <div class="timer">
            <span id="minutes">25</span>:<span id="seconds">00</span>
        </div>
        <div class="controls">
            <button id="start">开始</button>
            <button id="pause">暂停</button>
            <button id="reset">重置</button>
        </div>
        <div class="session-info">
            <p>完成的番茄钟轮数: <span id="session-count">0</span></p>
        </div>
        <div class="settings">
            <label for="work-duration">番茄时间（分钟）:</label>
            <input type="number" id="work-duration" value="25" min="1">
            <label for="short-break">短休息时间（分钟）:</label>
            <input type="number" id="short-break" value="5">
            <label for="long-break">长休息时间（分钟）:</label>
            <input type="number" id="long-break" value="15">
        </div>
        <div class="controls">
            <button id="start-pause">开始</button>
            <button id="reset">重置</button>
        </div>
        <div class="animation" id="animation"></div>
    </div>
</div>

<style>
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f5f5f5;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }
    .container {
        text-align: center;
        background-color: #f7f7f7;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .timer {
        font-size: 3em;
        margin-bottom: 20px;
    }
    .controls button {
        margin: 5px;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        transition: transform 0.2s, background-color 0.3s;
    }
    .controls button:hover {
        transform: scale(1.05);
        background-color: #ff6347;
        color: white;
    }
    .session-info {
        margin-top: 20px;
        font-size: 18px;
        color: #4CAF50;
    }
    .container {
        text-align: center;
        background-color: #f0f0f0;
        padding: 50px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    h1 {
        color: #e74c3c;
    }
    button {
        transition: transform 0.2s, background-color 0.3s;
    }
    button:hover {
        transform: scale(1.05);
        background-color: #ff9999;
    }
    #minutes, #seconds {
        font-size: 2em;
        margin: 0 5px;
    }
    .dynamic-background {
        animation: colorChange 1500s infinite alternate;
    }
    @keyframes colorChange {
        0% { background-color: #f0f0f0; }
        50% { background-color: #ff9999; }
        100% { background-color: #f0f0f0; }
    }
    .container {
        background-color: #f7f7f7;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    button {
        cursor: pointer;
        transition: transform 0.2s;
    }
    button:active {
        transform: scale(0.95);
    }
    #minutes, #seconds {
        font-size: 2em;
        margin: 0 5px;
    }
    .celebration {
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 24px;
        color: #ff6347;
        animation: fadeInOut 2s ease-in-out;
    }
    @keyframes countdown {
        from { color: #000; }
        to { color: #ff0000; }
    }
    .timer span {
        transition: color 0.5s;
    }
    .timer span.active {
        color: #ff0000;
    }
    button {
        background-color: #ff6666;
        border: none;
        color: white;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        border-radius: 5px;
        transition: background-color 0.3s, transform 0.3s;
    }
    button:hover {
        background-color: #ff4d4d;
    }
    button:active {
        transform: scale(0.95);
    }
</style> 